import "./css/base.css";
import "./css/main.css";

import { items, colors } from "./scripts/config.js";
import { init } from "./scripts/main_controller.js";

const lottery = document.querySelector("#lottery");
const canvas = document.createElement("canvas");
canvas.setAttribute("id", "canvas");
canvas.style.cssText = `width:100%;height:100%`;
lottery.appendChild(canvas);
const ctx = canvas.getContext("2d");

requestAnimationFrame(() => {
  let dpr = window.devicePixelRatio || 1;
  canvas.width = lottery.clientWidth * dpr;
  canvas.height = lottery.clientHeight * dpr;
  //   canvas.width = canvas.offsetWidth * dpr;
  //   canvas.height = canvas.offsetHeight * dpr;
  draw();
});
function draw() {
  let centerX = canvas.width / 2;
  let centerY = canvas.height / 2;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(centerX, centerY);
  let radius = canvas.width / 2 - 10;

  console.log(items);
  let itemDeg = (2 * Math.PI) / items.length;
  items.forEach((item, index) => {
    console.log(item, index);
    let color = colors[index % colors.length];
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.fillStyle = color;
    ctx.arc(0, 0, radius, index * itemDeg, (index + 1) * itemDeg);
    ctx.fill();
    // requestAnimationFrame(draw);
  });
  items.forEach((item, index) => {
    let textDeg = index * itemDeg + itemDeg / 2;
    ctx.rotate(textDeg);
    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.font = `${40}px Arial`;
    ctx.textBaseline = "middle";
    ctx.fillText(`${item}`, (4* radius) / 10, 0);
    ctx.rotate(-textDeg);
  });
}

init();
